/*
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-07 21:09:45
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-10 17:17:59
 * @FilePath: \Webgl-basic\src\6.绘制正三角形.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import {
    initShader,
    createBuffer,
    createCubeGem
} from '../lib/index'
import {
    mat4
} from 'gl-matrix';
import * as dat from 'dat.gui'
const canvas = document.querySelector('canvas')
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//获取webgl上下文
const gl = canvas.getContext('webgl')
//定义点顶点着色器(字符串)
const vs_shader = /*glsl*/ `
  // 指定浮点数精度为中等精度  
  precision mediump float;//glsl语法每一行后面都要加上分号,每一行后面都要加上分号
  attribute vec3 a_Position;
  attribute vec3 a_Color;
  varying vec3 v_Color;
  uniform mat4 u_ViewMatrix;
  uniform mat4 u_ProjMatrix;
  //glsl语法中,必须有一个入口函数main shaderToy里面叫mainImage cesuim里面可能叫czm_Main
  void main(){
    //gl_Position 是最后输出的坐标值,Vect4是四维向量,具有四个分量,每一个分量都是float
    // gl_Position= vec4(a_Position,1.0);
    gl_Position= u_ProjMatrix *u_ViewMatrix* vec4(a_Position,1.0);
    v_Color= a_Color;
  }`
//片元着色器
const fs_shader = /*glsl*/ `
precision mediump float;
varying vec3 v_Color;
void main(){
    //gl_FragColor是最后输出的像素颜色,是一个四维的数据
    gl_FragColor = vec4(v_Color,1.0);            
}`
//编译着色器,生成程序对象  操作手，专门负责javaScript和shader着色器的通讯
const program = initShader(gl, vs_shader, fs_shader)
gl.program = program;


//视点位置
const viewObj = {
    eyeX: 3,
    eyeY: 3,
    eyeZ: 8,
    lookAtX: 0,
    lookAtY: 0,
    lookAtZ: 0,
    fov: 38,
    near: 0.2,
    far: 100,
}
const renderView = () => {
    renderProMatrix()
    renderViewMatrix()
    const n = createCube();
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
}

const renderProMatrix = () => {
    const u_ProjMatrix = gl.getUniformLocation(program, 'u_ProjMatrix')
    //创建正射投影矩阵
    let projMatrix = mat4.create();
    // console.log("projMatrix1", projMatrix);
    mat4.identity(projMatrix);
    //使用正射投影矩阵 参数 左右上下近远六个面的距离
    // projMatrix = mat4.orthoNO(projMatrix,-1,1,-1,1,viewObj.near,viewObj.far)
    //使用透视投影矩阵
    projMatrix = mat4.perspectiveNO(projMatrix, viewObj.fov, window.innerWidth / window.innerHeight, viewObj.near, viewObj.far)
    // console.log("projMatrix2", projMatrix);
    gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix);

}
const renderViewMatrix = () => {
    const u_ViewMatrix = gl.getUniformLocation(program, 'u_ViewMatrix')
    //创建视图矩阵
    let viewMatrix = mat4.create();
    // console.log("viewMatrix1", viewMatrix);
    mat4.identity(viewMatrix);
    viewMatrix = mat4.lookAt(viewMatrix, [viewObj.eyeX, viewObj.eyeY, viewObj.eyeZ], [viewObj.lookAtX, viewObj.lookAtY, viewObj.lookAtZ], [0, 1, 0])
    // console.log("viewMatrix2", viewMatrix);
    gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix);
}

//

const getData = ()=>{
    // Create a cube
    //    v6----- v5
    //   /|      /|
    //  v1------v0|
    //  | |     | |
    //  | |v7---|-|v4
    //  |/      |/
    //  v2------v3
    var vertices = new Float32Array([   // Vertex coordinates
        1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0,  // v0-v1-v2-v3 front
        1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0,  // v0-v3-v4-v5 right
        1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0,  // v0-v5-v6-v1 up
        -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0,  // v1-v6-v7-v2 left
        -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,  // v7-v4-v3-v2 down
        1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0   // v4-v7-v6-v5 back
    ]);
    var colors = new Float32Array([     // Colors
        0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0,  // v0-v1-v2-v3 front(blue)
        0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4,  // v0-v3-v4-v5 right(green)
        1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4,  // v0-v5-v6-v1 up(red)
        1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4,  // v1-v6-v7-v2 left
        1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0,  // v7-v4-v3-v2 down
        0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0   // v4-v7-v6-v5 back
    ]);
    var indices = new Uint8Array([       // Indices of the vertices
        0, 1, 2, 0, 2, 3,    // front
        4, 5, 6, 4, 6, 7,    // right
        8, 9, 10, 8, 10, 11,    // up
        12, 13, 14, 12, 14, 15,    // left
        16, 17, 18, 16, 18, 19,    // down
        20, 21, 22, 20, 22, 23     // back
    ]);

    return {
        vertices,
        colors,
        indices
    }
}
//创建正方体函数
const createCube = () => {
    const {vertices,colors,indices} = getData();
    // // indices = new Uint8Array(indices)
    // createBuffer(gl, vertices, 'a_Position', {
    //     size: 3
    // })
    // //创建颜色缓冲区
    // createBuffer(gl, colors, 'a_Color', {
    //     size: 3
    // })    
    // //创建索引缓冲区
    // let indexBuffer = gl.createBuffer();
    // //创建绑定索引缓冲区
    // gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    // gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
    // //开启隐藏面剔除
    // gl.enable(gl.DEPTH_TEST)
    // //清除深度缓冲区
    // gl.clear(gl.DEPTH_BUFFER_BIT)
    // return indices.length;
    const config = new Map()
    config.set("a_Position",vertices,)  
    config.set("a_Color",colors,) 
    //  封装正方体的buffer
    const n = createCubeGem(gl,indices,config,{size:3})
    return n
}

renderView()














const gui = new dat.GUI();
const projFolder = gui.addFolder('proj');
projFolder.add(viewObj, 'near', -1, 1, 0.01).onChange(renderView)
projFolder.add(viewObj, 'far', -1, 2, 0.01).onChange(renderView)
projFolder.add(viewObj, 'fov', 0, 90, 0.1).onChange(renderView)


const eyeFolder = gui.addFolder('eyePosition');
eyeFolder.add(viewObj, 'eyeX', -1, 1, 0.01).onChange(renderView)
eyeFolder.add(viewObj, 'eyeY', -1, 1, 0.01).onChange(renderView)
eyeFolder.add(viewObj, 'eyeZ', -1, 5, 0.01).onChange(renderView)

const lookAtFolder = gui.addFolder('lookPostion');
lookAtFolder.add(viewObj, 'lookAtX', 0, 1, 0.01).onChange(renderView)
lookAtFolder.add(viewObj, 'lookAtY', 0, 1, 0.01).onChange(renderView)
lookAtFolder.add(viewObj, 'lookAtZ', 0, 1, 0.01).onChange(renderView)